<template>
    <section class="vh-100">
        <div class="container py-5 h-100">
            <div class="row d-flex align-items-center justify-content-center h-100">
                <div class="col-md-8 col-lg-7 col-xl-6">
                    <img src="../../assets/logo/login.png" class="img-fluid" alt="Phone image">
                </div>
                <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
                    <template v-if="isAccount">
                       
                            <loginChildren>
                                <a href="javascript:;" @click="changeAcount">没有账号？ 去注册</a>
                            </loginChildren>
                      
                    </template>
                    <template v-if="!isAccount">
                  
                            <register @successRegister="changeAcount">
                                <a href="javascript:;" @click="changeAcount">已有账号？ 去登录</a>
                            </register>
                    
                    </template>


                </div>
            </div>
        </div>
    </section>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';

import loginChildren from "./comp/loginchildren.vue"
import register from "./comp/register.vue"

const router = useRouter()
interface IUser {
    username: string,
    password: string
}

const isAccount = ref<boolean>(true)

const confirmUserRegister = async () => {
    //  const res  = await                                    
}

const changeAcount = () => {
    isAccount.value = !isAccount.value
}

const user = reactive<IUser>({
    username: localStorage.getItem('username') || "",
    password: ""
})

const Remember = ref<boolean>(false)

const state = ref<boolean>(true)

const changeState = () => {
    state.value = !state.value
}

const confirmLogin = (): void => {
    if (Remember.value) {
        window.localStorage.setItem('username', user.username)
    }
    if (user.password == '123' && user.username == "admin") {
        window.localStorage.setItem('login', 'true');
        router.push({ path: "/" });
        const key = '加载中…………';

        message.loading({ content: 'Loading...', key });
        setTimeout(() => {
            message.success({ content: '登录成功', key, duration: 2 });
        }, 1000);
        router.push({ path: '/' });
    }

}
</script>

<style>
.divider:after,
.divider:before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee;
}
</style>